<template>
  <div class="app" id="app">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="个人介绍" name="first">
        <div>
          <div class="banner">
            <!-- <img class="hidden-md-only hidden-lg-only hidden-xl-only" :src="bannerXSSM" alt="个人简历" />
            <img
              class="hidden-xs-only hidden-sm-only hidden-lg-only hidden-xl-only"
              :src="bannerMD"
              alt="个人简历"
            />
            <img class="hidden-xs-only hidden-sm-only hidden-md-only" :src="bannerLGXL" alt="个人简历" />-->
            <!-- 第一行 -->
            <el-row>
              <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="part">
                <router-view name="PartOne" />
                <!-- <part-one /> -->
              </el-col>
              <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="part">
                <!-- <router-view refs="partThree" name="PartThree" /> -->
                <part-three ref="partThree"></part-three>
              </el-col>
              <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="part">
                <router-view name="PartFive" />
              </el-col>
            </el-row>
            <!-- 第二行 -->
            <el-row>
              <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="part">
                <router-view name="PartSix" />
              </el-col>
              <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="part">
                <router-view name="PartFour" />
              </el-col>
              <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="part">
                <router-view name="PartSeven" />
              </el-col>
            </el-row>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="个人项目" name="second">
        <div class="part">
          <el-collapse v-model="programNames" @change="handleChange" accordion>
            <el-collapse-item title="上海创创文化传播有限公司" name="1">
              <div>
                <strong>项目描述：</strong>
                <p>主要是负责官网PC端(JQ+DIV+CSS)，移动端(Jq+H5+CSS3)，店务管理系统（JQ+layui框架），结果识堂（移动端，VUE全家桶 + VUX）, PC端CRM后台管理系统（VUE全家桶+elementUi）,仪表盘可视化项目CRM的开发（VUE全家桶+eCharts），小程序端（小程序原生+WUX）等项目</p>
              </div>
              <div>
                <strong>技术简介：</strong>
                <ol>
                  <li>官网PC端，移动端的改造（JQuery+html+css+js）</li>
                  <li>小兔店务管理系统，技术框架主要采用layui,里面涉及到进销存采购，查询订单，优惠券等功能模块）</li>
                  <li>小程序的开发（主要是销售人员可以自主创建订单，查看客户的记录及流程审批等）</li>
                  <li>结果识堂（VUE全家桶+VUX）移动端H5项目，微信公众号可以搜索</li>
                  <li>CRM管理系统（VUE全家桶+ElementUi） 已完成，目前由我跟另一个前端+两个java程序员维护功能迭待</li>
                  <li>仪表盘可视化系统，功能包含销售仪表盘，执行仪表盘，课程仪表盘，可以在电脑上查看也可投放到大屏电视机上观看（VUE全家桶+echart）</li>
                </ol>
              </div>
            </el-collapse-item>
            <el-collapse-item title="55海淘" name="2">
              <div>
                <strong>项目描述：</strong>
                <p>主要是负责官网维护，官网直购APP，55海淘返利APP的新功能迭待，比如直购APP品牌体验团，(返利APP免费团），6周年庆专题活动，sys后台的百度ueditor编辑器的二次开发等。</p>
              </div>
              <div>
                <strong>技术简介：</strong>
                <ol>
                  <li>APP免费团活动(拉新用户)，主要是用到了Juicer模板引擎来完成DOM拼接后台JSON数据，JQ+Juicer+REM 来完成项目。</li>
                  <li>官网后台是ueditor编辑器的二次开发及官网的一些其它小功能维护。</li>
                  <li>APP的知识点原本是requireJS来加载各个组件依赖，但后续遇到某些 Android机型返回键的问题而不得不采用传统方式来引入Js。</li>
                  <li>6周年庆的H5开发，其它一些专题活动开发。</li>
                </ol>
              </div>
            </el-collapse-item>
            <el-collapse-item title="易居-实惠" name="3">
              <div>
                <strong>项目描述：</strong>
                <p>负责上海区域社区门店系统，SMS客服系统的维护BUG修复及新功能的迭代和研发新项目 特卖系统，该系统主要是用bootstrap-ace后台界面模板配合JQ-ui写的，SMS服务系统的新功能是采用angular框架写的，以及一些APP端的页面代码编写（意见反馈，通过微信分享后的页面等），代码通过webpack打包，维护老代码，功能迭代，BUG修改。</p>
              </div>
              <div>
                <strong>技术简介：</strong>
                <ol>
                  <li>前端模块构建工具采用webpack打包。</li>
                  <li>结合原来老项目上的基础了，用angularJS,把 新特卖 模块 迭待了进去</li>
                  <li>了解一些react组件化思想来提高性能。</li>
                  <li>MOCKJS模拟数据接口，来实现前端逻辑，不用依赖于后端的API了</li>
                </ol>
              </div>
            </el-collapse-item>
            <el-collapse-item title="华融道" name="4">
              <div></div>
              <div>
                <strong>项目描述：</strong>
                <p>
                  负责或参与PC端、WAP端等平台产品的前端页面开发；
                  负责前端页面开发制作和维护，配合后台开发人员实现页面、联调相关功能；
                  页面修改，支付页面的功能对接。
                </p>
              </div>
              <div>
                <strong>技术简介：</strong>
                <ol>
                  <li>针对官网新需求及时变更及不定期的专题活动页面上线。连连支付的接入等功能完善。</li>
                  <li>官网二次的重构,首页懒加载方式。</li>
                  <li>项目中用到了第三方组件Highcharts来画图表，以增加交互体验。</li>
                  <li>WAP站中有用到轻量级Zepto框架，以及模板引擎的运用。</li>
                  <li>解决移动项目中遇到的坑，兼容性的BUG， 页面性能优化，图片预加载方式；</li>
                </ol>
              </div>
            </el-collapse-item>
            <el-collapse-item title="集付通终端机" name="5">
              <div></div>
              <div>
                <strong>项目描述：</strong>
                <p>Js通过后台提供的接口获取数据并显示及了解jsonp原理及使用JSONP跨域请求并展示在前台界面，并对JS,css代码进行手动压缩。</p>
              </div>
              <div>
                <strong>技术简介：</strong>
                <ol>
                  <li>图片预加载的运用以及CSS-sprites的合并图操作；</li>
                  <li>了解同域请求跟与JSONP跨域请求的区别及实现原理；</li>
                  <li>UI页面原型实现,兼容性布局；</li>
                  <li>JS（javascript , jquery）交互效果实现；</li>
                  <li>与后端程序的数据交互；</li>
                </ol>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import PartThree from '@/components/PartThree';
export default {
  name: "App",
  data() {
    return {
      activeName: "first",
      programNames: ["1"],
      bannerXSSM: require("./assets/img/banner_640.png"),
      bannerMD: require("./assets/img/banner_1000.png"),
      bannerLGXL: require("./assets/img/banner.png")
    };
  },
  mounted(){
    
  },
  components:{
    PartThree
  },
  methods: {
    handleClick(tab, event) {
      if(this.activeName === 'first'){
        // this.$refs.partThree.drawECharts()
      }
    },
    handleChange(val) {
      console.log(val);
    }
  }
};
</script>

<style>
body {
  background: #011128;
  color: #fff;
}
.el-tabs__item {
  color: #fff;
  border: none !important;
}
.el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: none;
}
.el-tabs--card > .el-tabs__header {
  margin: 20px;
  border-bottom: 1px solid #034bbe;
}
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  background: #034bbe;
  color: #fff;
}
.el-collapse {
  border-top: 1px solid #9cb7f7;
  border-bottom: 1px solid #9cb7f7;
}
.el-collapse-item__header {
  background: none;
  border-bottom: 1px solid #9cb7f7;
  padding: 0 10px;
  color: #5a89d0;
  font-size: 16px;
}
.el-collapse-item__content {
  padding: 0 10px 20px 10px;
  color: #74a0e2;
}
.el-collapse-item__wrap {
  background: none;
}
.app {
  width: 100%;
}
.part {
  padding: 20px;
}
.banner img {
  width: 100%;
  height: 80px;
}
.BMap_cpyCtrl,
.BMap_noprint,
.anchorBL {
  display: none !important;
}
</style>